<template>
  <transition name="slide">
    <div class="archive-container">
      <div class="body">
        <div class="input-item">
          <div class="item-container">
            <div class="input-title">姓名</div>
            <input type="text" class="input" v-model="name" placeholder="请填写体检人本人姓名"/>
          </div>
        </div>
        <!-- <div class="input-item">
          <div class="item-container">
            <div class="input-title">性别</div>
            <select class="input">
              <option value ="volvo">男</option>
              <option value ="saab">女</option>
            </select>
          </div>
        </div> -->
        <div class="input-item">
          <div class="item-container">
            <div class="input-title">身份证号</div>
            <input type="text" class="input" maxlength="18" v-model="idNumber" placeholder="请填写体检人身份证号"/>
          </div>
        </div>
        <div class="input-item">
          <div class="item-container last">
            <div class="input-title">手机号码</div>
            <input class="input" type="number" oninput="if(value.length>11)value=value.slice(0,11)" v-model="telephone" placeholder="请填写体检人手机号码"/>
          </div>
        </div>
      </div>
      <div class="button" @click="publish">点击修改</div>
    </div>
  </transition>
</template>

<script>
import { http } from 'api/main.js'
import { isChineseName, isIdNumber, isTelephone } from 'common/js/reg.js'

export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      idNumber: '',
      telephone: '',
    }
  },
  created() {
    this._getUserArchive()
  },
  methods: {
    publish() {
      if (!isChineseName(this.name)) {
        alert('请输入正确的姓名')
        return
      }
      if (!isIdNumber(this.idNumber)) {
        alert('请输入正确的身份证号码')
        return
      }
      if (!isTelephone(this.telephone)) {
        alert('请输入正确的手机号码')
        return
      }
      http('archive', {
        telephone: this.telephone,
        personName: this.name,
        identity: this.idNumber,
        post: 1
      }).then((res) => {
        console.log(res)
      })
    },
    _getUserArchive() {
      http('archive').then((res) => {
        this.telephone = res.telephone
        this.name = res.personname
        this.idNumber = res.identity
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.archive-container
  position: fixed;
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 1000
  background-color: $color-background
  overflow: hidden;
  .body
    margin: 20px 10px 0 10px
    background-color: #fff
    border-radius: 5px
    .input-item
      padding: 0 10px 0 10px
      height: 60px
      line-height: 60px
      .item-container
        width: 100%
        display: flex
        border-1px(#ccc)
        .input-title
          width: 27%
        .input
          width: 73%
        .datePickControl
          width: 73%
          img
            margin: 20px 40px 20px 0
            float: right
      .last
        border-none()
  .button
    position: absolute;
    bottom: 40px
    background-color: #009fab
    color: #fff
    width: calc(100% - 20px)
    margin: 0 10px
    border-radius: 5px
    text-align: center
    height: 40px
    line-height: 40px


.slide-enter-active,
.slide-leave-active
  transition all 0.3s
.slide-enter,
.slide-leave-to
  transform: translate3D(100%, 0, 0)
</style>
